<template>
  <div>
    <div class="pay_box">
      <el-form>
        <el-form-item label="接诊日期">
          <el-date-picker
            v-model="form.receptionTimeStart"
            class="pay_date"
            type="date"
            clearable
            value-format="yyyy-MM-dd"
            placeholder="开始时间"
          ></el-date-picker>----
          <el-date-picker
            style="marigin-left:4%;"
            v-model="form.receptionTimeEnd"
            class="pay_date"
            type="date"
            clearable
            value-format="yyyy-MM-dd"
            placeholder="结束时间"
          ></el-date-picker>
          <deptSearch style="width:200px;" v-model="form.deptId"></deptSearch>
          <doctorSearch
            style="width:200px;margin-left:10px;margin-right:10px;"
            v-model="form.doctorId"
          ></doctorSearch>
          <el-button type="primary" circle icon="el-icon-search" @click="getChartTable(-1)"></el-button>
          <el-button type="primary" style="float:right;" @click="exportExcel()">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="pay_box">
      <table class="table-box">
        <thead>
          <tr>
            <th
              style="text-align:center;font-size:18px;"
              colspan="15"
            >{{form.receptionTimeStart | changeYearMonthDay}} - {{form.receptionTimeEnd | changeYearMonthDay}}门诊日志统计报表</th>
          </tr>
          <tr>
            <th>就诊日期</th>
            <th>档案号</th>
            <th>患者姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>手机号</th>
            <th>职业</th>
            <th>住址</th>
            <th>工作单位</th>
            <th>发病日期</th>
            <th>初步诊断</th>
            <th>接诊类型</th>
            <th>登记科室</th>
            <th>登记人员</th>
            <!-- <th>护士姓名</th> -->
            <th>接诊医生</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tabList" :key="index">
            <td>{{item.dateDay}}</td>
            <td>{{item.medicalCard}}</td>
            <td>{{item.patientInfo.name}}</td>
            <td>{{item.patientInfo.sex | toSex}}</td>
            <td>{{item.patientInfo.age}}</td>
            <td>{{item.patientInfo.mobile}}</td>
            <td>--</td>
            <td>{{item.patientInfo.address}}</td>
            <td>{{item.patientInfo.workUnit}}</td>
            <td>--</td>
            <td>--</td>
            <td>{{item.registerName}}</td>
            <td>{{item.deptName}}</td>
            <td>
              <span v-if="item.hpMember">{{item.hpMember.memberName}}</span>
            </td>
            <!-- <td>{{item.subsequentVisit}}</td> -->
            <td>{{item.doctorName}}</td>
          </tr>
        </tbody>
      </table>
      <br />
      <pager v-model="pager" @change-pagenum="getChartTable"></pager>
    </div>
  </div>
</template>
<script>
import Excel from "@/_js/excel.js";
export default {
  data() {
    return {
      form: {
        deptId: "",
        status: 2,
        doctorId: "",
        receptionTimeStart: "",
        receptionTimeEnd: ""
      },
      orderDayCount: {
        subsequentVisitTotal: 0,
        firstVisitTotal: 0
      },
      showDay: false,
      pager: { pageSize: 10, pageNum: 1, total: 0 },
      tabList: [],
      chart: null
    };
  },
  mounted() {
    this.form.receptionTimeStart = this.getDate();
    this.form.receptionTimeEnd = this.getNewDate();
    this.getChartTable();
  },
  methods: {
    getChartTable() {
      let th = this;
      th.showLoading();
      let j = Object.assign(th.form, th.pager);
      th.$api
        .getRegisterListInfo(j)
        .then(res => {
          if (res.executed) {
            th.tabList = res.dataBody.list;
            th.pager.total = res.dataBody.total;
            th.showLoading(false);
          } else {
            th.$message.error(res.message);
            th.showLoading(false);
          }
        })
        .catch(error => {
          th.showLoading(false);
        });
    },
    exportExcel() {
      let th = this;
      //导出
      th.showLoading(true);
      let j = { pageSize: "1000", pageNum: "1" };
      j = Object.assign(th.form, j);
      th.$api.getRegisterListInfo(j).then(res => {
        if (res.executed) {
          if (res.dataBody != undefined) {
            let list = [];
            let data = res.dataBody.list;
            for (let i = 0; i < data.length; i++) {
              let arr = {};
              Object.assign(
                arr,
                data[i],
                data[i].patientInfo,
                data[i].hpMember
              );
              list.push(arr);
            }
            Excel(
              list,
              [
                { key: "dateDay", name: "就诊日期" },
                { key: "medicalCard", name: "门诊号" },
                { key: "name", name: "患者姓名" },
                { key: "age", name: "年龄" },
                { key: "mobile", name: "手机号" },
                { key: "address", name: "住址" },
                { key: "workUnit", name: "工作单位" },
                { key: "registerName", name: "接诊类型" },
                { key: "deptName", name: "登记科室" },
                { key: "memberName", name: "登记人员" },
                { key: "doctorName", name: "接诊医生" }
              ],
              "门诊日志"
            );
            th.showLoading(false);
          }
        }
      });
    }
  },
  filters: {
    changeYearMonthDay(value) {
      let str = "";
      if (value) {
        str =
          value.substring(0, 4) +
          "年" +
          value.substring(5, 7) +
          "月" +
          value.substring(8, 10) +
          "日";
      }
      return str;
    }
  },
  components: {
    deptSearch: () => import("@/pages/_com/deptSearch"),
    doctorSearch: () => import("@/pages/_com/doctorSearch")
  }
};
</script>
<style lang="scss" scoped>
.pay_box {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
  overflow-x: auto;
  .table-box {
    min-width: 600px;
    font-size: 12px;
  }
}
.pay_date {
  width: 10% !important;
  margin-right: 1%;
}
.chart_box {
  display: inline-block;
  width: 100%;
  height: 400px;
}
</style>